<template>
  <div class="contentBox setScrollbar">
    <div class="setFormMarBtm btnBox">
      <el-form
        class="yn_form"
        inline
        size="mini"
        label-width="auto"
      >
        <el-form-item
          label="问题名称"
          label-width="auto"
        >
          <el-input
            v-model="name"
            class="yn_ipt"
            placeholder="问题名称"
            :maxlength="20"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="申请人"
          label-width="auto"
        >
          <el-input
            v-model="startUser"
            class="yn_ipt"
            placeholder="申请人"
            :maxlength="20"
            clearable
          />
        </el-form-item>

        <el-form-item>
          <el-button
            class="yn_btn"
            type="primary"
            @click="queryList()"
          >
            查询
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            class="yn_btn"
            @click="reset()"
          >
            重置
          </el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-button
          type="primary"
          size="mini"
          :loading="downloadLoading"
          @click="handledownload"
        >
          导出
        </el-button>
      </div>
    </div>
    <div class="content">
      <div class="leftTree">
        <el-tree
          :data="treeData"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
        />
      </div>
      <div class="cntTab setScrollbar">
        <template>
          <el-table
            v-loading="loading"
            :data="tableData"
            stripe
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="50" align="center" />
            <el-table-column
              prop="questionNumber.questionNumber.questionNumber"
              label="问题编号"
              width="175"
            />
            <el-table-column
              prop="process_name"
              label="问题名称"
              min-width="180"
            />
            <el-table-column
              prop="classification_name"
              label="所属分类"
              width="150"
            />
            <el-table-column
              prop="level"
              label="问题级别"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.quesLevel.quesLevel.quesLevel">{{ scope.row.quesLevel.quesLevel.quesLevel }}</span>
                <span v-else>{{ handLevel(scope.row.level) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="node_name"
              label="节点名称"
            />
            <el-table-column
              prop="name"
              label="申请人"
              width="120"
            />
            <el-table-column
              prop="start_time"
              label="发起时间"
              width="160"
              :formatter="dateFormatter"
            />
            <el-table-column
              prop="due_date"
              label="截止日期"
              width="120"
              :formatter="dateFormatter1"
            />
            <el-table-column
              label="操作"
              width="150"
            >
              <template slot-scope="{row}">
                <el-button
                  size="mini"
                  class="MR18 bg5584FF"
                  type="primary"
                  @click="showProcess(row)"
                >
                  处理
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页 -->
        <div class="pageBox">
          <el-pagination
            background
            :current-page.sync="pageNo"
            :page-size="10"
            layout="prev, pager, next, jumper"
            :total="total"
            @current-change="getListData"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import formatDate from '@/utils/date';
export default {
  data() {
    return {
      tableData: [],
      tableLoating: false,
      downloadLoading: false,
      pageSize: 10,
      pageNo: 1,
      showTemp: 'showList',
      procInstId: '',
      procDefId: '',
      processName: '',
      userId:JSON.parse(sessionStorage.getItem('user')).account,
      deptId:JSON.parse(sessionStorage.getItem('user')).deptId,
      name:'',
      startUser:'',
      addFormVisible:false,
      searchForm: {},
      catCode: 'process',
      total: 0,
      treeLoading: false,
      loading: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted(){
    this.getListData()
    this.getTree()
  },
  methods:{
    handStatus(status){
      return status === 'ACTIVE' ? '处理中' : '已完成'
    },
    handLevel(level){
      return level === '0' ? '初级' : level === '1' ? '中级' : '高级'
    },
    reset(){
      this.startUser = ''
      this.name = ''
      this.pageSize = 10
      this.pageNo = 1
      this.getListData()
    },
    dateFormatter(a, b, c) {
      if (!c) return;
      return formatDate(new Date(c), 'yyyy-MM-dd hh:mm');
    },
    dateFormatter1(a, b, c) {
      if (!c) return;
      return formatDate(new Date(c), 'yyyy-MM-dd');
    },
    queryList(){
      this.pageSize = 10
      this.pageNo = 1
      this.getListData()
    },
    getListData(){
      this.tableLoating = true
      const queryParams = {
        'ACT_RU_TASK:data[]': {
          '@column': 'ID_:taskId,PROC_INST_ID_:procInstId,name_:node_name,due_date_:due_date,PROC_DEF_ID_:procDefID',
          '@where':{
            'id_@in':`SELECT DISTINCT ( a.id_ ) FROM ACT_RU_TASK a LEFT JOIN ACT_RU_IDENTITYLINK b ON a.id_ = b.TASK_ID_ LEFT JOIN sys_position c ON b.GROUP_ID_ = c.CODE LEFT JOIN sys_user_pos d ON c.position_id = d.pos_id LEFT JOIN sys_user e ON d.user_id = e.user_id LEFT JOIN (SELECT b.dept_id AS dept_pids,a.id_ FROM ACT_RU_TASK a LEFT JOIN act_hi_procinst proc ON a.PROC_INST_ID_ = proc.id_ LEFT JOIN sys_user b ON proc.START_USER_ID_ = b.account ) m ON a.id_ = m.id_  WHERE a.assignee_ = '${this.userId}' OR b.user_id_ = '${this.userId}' OR ( e.account = '${this.userId}' and m.dept_pids like '%${this.deptId}%') `
          },
          '@page': {
            '@pageSize': 10,
            '@pageNo': this.pageNo
          },
          '@join': [
            {
              'ACT_RE_PROCDEF@leftOutJoin': {
                '@column': 'KEY_:procDefKey',
                '@on': {
                  'ID_': 'data/PROC_DEF_ID_'
                }
              }
            },
            {
              'ACT_HI_PROCINST@leftOutJoin': {
                '@column': 'START_TIME_:start_time,START_USER_ID_:startUser',
                '@on': {
                  'ID_': 'data/proc_inst_id_'
                },
                '@order':'START_TIME_-'
              }
            },
            {
              'SYS_USER@leftOutJoin': {
                '@column': 'account,name',
                '@on': {
                  'account': 'ACT_HI_PROCINST/START_USER_ID_'
                },
                '@where':{
                  'name@like':`%${this.startUser}%`
                }
              }
            },
            {
              'c_process@leftOutJoin': {
                '@column': 'name:process_name,cat_code',
                '@on': {
                  'bpmn_key': 'ACT_RE_PROCDEF/KEY_'
                },
                '@where': {
                  'name@like': `%${this.name}%`,
                  'cat_code@like':`${this.catCode}%`
                }
              }
            },
            {
              'sys_classification@leftOutJoin': {
                '@column': 'classification_name',
                '@on': {
                  'cate_code': 'c_process/cat_code'
                }
              }
            }
          ],
          '@child':[
            {
              'act_hi_varinst:childs{}': {
                '@column': 'TEXT_:closing_date',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'closing_date'
                }
              }
            },
            {
              'act_hi_varinst:questionNumber{}': {
                '@column': 'TEXT_:questionNumber',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'questionNumber'
                }
              }
            },
            {
              'act_hi_varinst:quesLevel{}': {
                '@column': 'TEXT_:quesLevel',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'ques_level'
                }
              }
            }
          ]
        }
      }
      this.COM.jsonsqlForSelect(queryParams).then(res=>{
        this.tableLoating = false
        this.tableData = res.data
        this.total = parseInt(res.total)
      })
    },
    showProcess(row){
      this.procInstId = row.procInstId
      this.procDefId = row.procDefID
      this.processName = row.process_name
      this.showTemp = 'showDetail'
      row.type = 'handle'
      this.$router.push({
        name: 'approve_process',
        params: { data: row,type:'before_process' }
      });
    },
    handledownload() {
      this.downloadLoading = true;
      const queryParams = {
        'ACT_RU_TASK:data[]': {
          '@column': 'ID_:taskId,PROC_INST_ID_:procInstId,name_:node_name,due_date_:due_date,PROC_DEF_ID_:procDefID',
          '@where':{
            'id_@in':`SELECT DISTINCT ( a.id_ ) FROM ACT_RU_TASK a LEFT JOIN ACT_RU_IDENTITYLINK b ON a.id_ = b.TASK_ID_ LEFT JOIN sys_position c ON b.GROUP_ID_ = c.CODE LEFT JOIN sys_user_pos d ON c.position_id = d.pos_id LEFT JOIN sys_user e ON d.user_id = e.user_id LEFT JOIN (SELECT b.dept_id AS dept_pids,a.id_ FROM ACT_RU_TASK a LEFT JOIN act_hi_procinst proc ON a.PROC_INST_ID_ = proc.id_ LEFT JOIN sys_user b ON proc.START_USER_ID_ = b.account ) m ON a.id_ = m.id_  WHERE a.assignee_ = '${this.userId}' OR b.user_id_ = '${this.userId}' OR ( e.account = '${this.userId}' and m.dept_pids like '%${this.deptId}%') `
          },
          '@join': [
            {
              'ACT_RE_PROCDEF@leftOutJoin': {
                '@column': 'KEY_:procDefKey',
                '@on': {
                  'ID_': 'data/PROC_DEF_ID_'
                }
              }
            },
            {
              'ACT_HI_PROCINST@leftOutJoin': {
                '@column': 'START_TIME_:start_time,START_USER_ID_:startUser',
                '@on': {
                  'ID_': 'data/proc_inst_id_'
                },
                '@order':'START_TIME_-'
              }
            },
            {
              'SYS_USER@leftOutJoin': {
                '@column': 'account,name',
                '@on': {
                  'account': 'ACT_HI_PROCINST/START_USER_ID_'
                }
              }
            },
            {
              'c_process@leftOutJoin': {
                '@column': 'name:process_name,cat_code',
                '@on': {
                  'bpmn_key': 'ACT_RE_PROCDEF/KEY_'
                },
                '@where': {
                  'cat_code@like':`${this.catCode}%`
                }
              }
            },
            {
              'sys_classification@leftOutJoin': {
                '@column': 'classification_name',
                '@on': {
                  'cate_code': 'c_process/cat_code'
                }
              }
            }
          ],
          '@child':[
            {
              'act_hi_varinst:childs{}': {
                '@column': 'TEXT_:closing_date',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'closing_date'
                }
              }
            },
            {
              'act_hi_varinst:questionNumber{}': {
                '@column': 'TEXT_:questionNumber',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'questionNumber'
                }
              }
            },
            {
              'act_hi_varinst:quesLevel{}': {
                '@column': 'TEXT_:quesLevel',
                '@where': {
                  'proc_inst_id_@eq': '${procInstId}',
                  'name_@eq': 'ques_level'
                }
              }
            }
          ]
        }
      }
      this.COM.jsonsqlForSelect(queryParams).then(res=>{
        res.data.forEach(item =>{
          item.level = item.quesLevel.quesLevel.quesLevel ? item.quesLevel.quesLevel.quesLevel : this.handLevel(item.level)
          item.start_time = formatDate(new Date(item.start_time), 'yyyy-MM-dd hh:mm')
          item.due_date = item.due_date ? formatDate(new Date(item.due_date), 'yyyy-MM-dd') : ''
          item.questionNumber = item.questionNumber.questionNumber.questionNumber
        })
        const list = res.data

        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = [
            '问题编号',
            '问题名称',
            '所属分类',
            '问题级别',
            '节点名称',
            '申请人',
            '发起时间',
            '截止日期'
          ];
          const filterVal = [
            'questionNumber',
            'process_name',
            'classification_name',
            'level',
            'node_name',
            'name',
            'start_time',
            'due_date'
          ];
          console.log('listL', list)
          let data = this.COM.formatJson(filterVal, list)
          console.log('data;', data)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: '待审核',
            autoWidth: this.autoWidth,
            bookType: this.bookType
          });
          this.downloadLoading = false;
        }).catch(() => {
          this.downloadLoading = false;
        })
      }).catch(() => {
        this.downloadLoading = false;
      })
    },
    getTree() {
      this.COM.jsonsqlForSelect({
        'sys_classification:data[]': {
          '@column':
            'classification_id:id,pid:parentId,classification_name:label,cate_code:value',
          '@where': {
            'cate_code@like': '%process%'
          }
        }
      })
        .then(res => {
          this.treeData = this.COM.getTreeData(res.data, 1);
        })
        .catch(e => {
          console.log('error:', e)
        });
    },
    handleNodeClick(data) {
      // 树节点点击方法
      this.pageNo = 1;
      this.catCode = data.value;
      this.getListData()
    }
  }
};
</script>
<style lang="less" scoped>
  .brdDashed {
    border: 1px dashed #888;
  }
  .brdCon {
    padding: 3px 7px;
    border-radius: 12px;
    font-size: 12px;
    color: #5875a4;
    background: #e4edf4;
  }
  .word_yu {
    margin-left: 5px;
    margin-right: 5px;
  }
  .brdConPass {
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 12px;
    color: #5875a4;
    background: #e4edf4;
  }
  .brdConRed {
    padding: 3px 7px;
    border-radius: 2px;
    font-size: 12px;
    color: #c4616b;
    background: #f5e7e5;
  }
  /deep/.el-icon-circle-close {
    margin-right: 20px !important;
  }
  .setFormMarBtm {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin-bottom: 0;
    }
  }
</style>
